<template>
	<coreshop-page :customStyle="{ 'width': '100vw', 'height': '100vh' }">
		<view class="layout-login-page page-bg">
			<view class="login-box">
				<image class="logo" mode="widthFix" :src="handleStaticResources('/static/images/home-logo-on.png')">
				</image>
				<view class="phone-box m-b-30">
					<uv-input
						:customStyle="{ 'background': '#FFF', 'border-color': '#FFF', 'height': '60rpx', 'padding': '16rpx 20rpx', 'border': 'none' }"
						placeholder="请输入手机号" type="number" shape="circle" border="surround"
						v-model="state.mobile"></uv-input>
				</view>
				<view class="code-box m-b-30">
					<uv-input placeholder="请输入验证码"
						:customStyle="{ 'background': '#FFF', 'border-color': '#FFF', 'height': '60rpx', 'padding': '16rpx 20rpx', 'border': 'none' }"
						type="number" shape="circle" border="surround" v-model="state.code"></uv-input>
					<view :class="['code', { 'on': state.isCounting }]" @click="handleClickCode">{{ state.codeText }}
					</view>
				</view>
				<view class="btn-box" @click="handleLoginNow">立即登录</view>
			</view>

			<view class="copyright">
				<coreshop-copyright></coreshop-copyright>
			</view>
		</view>
	</coreshop-page>

</template>
<script setup lang="ts">
	import { reactive } from 'vue';
	import { onHide } from '@dcloudio/uni-app';
	import { handleStaticResources, handleShowToast } from '@/core/utils';
	import { sendSms, smsLogin } from '@/core/api';
	import type { Response } from '@/core/models';
	import { Invitecode, UserToken } from '@/core/consts';
	import { mobile } from '@/uni_modules/uv-ui-tools/libs/function/test.js';

	const state = reactive<{
		mobile : number | null; // 手机号
		code : number | null;  // 验证码
		intervalTime : any; // 储存定时器
		codeText : string;  // 倒计时文字
		codeTime : number;  // 倒计时时间
		isCounting : boolean; // 是否还在倒计时中 
	}>({
		mobile: null,
		code: null,
		intervalTime: null,
		codeText: '获取验证码',
		codeTime: 60,
		isCounting: false,
	})

	onHide(() => {
		clearInterval(state.intervalTime);
	});

	/** 验证手机号 */
	const handleVerifyPhoneNumber = () => {
		if (!state.mobile) {
			handleShowToast('请输入手机号');
			return false;
		}
		if (!mobile(state.mobile)) {
			handleShowToast('手机号输入错误');
			return false;
		}
		return true;
	}

	// 点击倒计时
	const handleClickCode = async () => {
		if (!handleVerifyPhoneNumber()) {
			return false;
		}
		if (!state.isCounting) {
			/** 发送验证码 */
			const sms : Response<any> = await sendSms({
				mobile: state.mobile,
				code: 'login'
			});
			if (sms.status) {
				handleShowToast(sms.msg);
				state.isCounting = true;
				state.codeText = `${state.codeTime}秒后重新发送`;

				state.intervalTime = setInterval(() => {
					if (state.codeTime > 0) {
						state.codeTime--;
						state.codeText = `${state.codeTime}秒后重新发送`;
					} else {
						handleResetCountdown();
					}
				}, 1000);

			} else {
				handleShowToast(sms.msg);
			}
		}
	}

	/** 重置倒计时 */
	const handleResetCountdown = () => {
		state.codeTime = 3;
		state.codeText = '获取验证码';
		state.isCounting = false;
		clearInterval(state.intervalTime);
	}

	/** 立即登录 */
	const handleLoginNow = async () => {
		if (!handleVerifyPhoneNumber()) {
			return false;
		}
		if (!state.code) {
			handleShowToast('请输入验证码');
			return false;
		}
		let data = {
			mobile: state.mobile,
			code: state.code,
			platform: 1
		}
		/** 有推荐码的话，带上 */
		if (uni.getStorageSync(Invitecode)) {
			data['invitecode'] = uni.getStorageSync(Invitecode);
		}

		const login : Response<any> = await smsLogin(data);
		if (login.status) {
			uni.setStorageSync(UserToken, login.data.token);

			/** 返回上一个页面 */
			handleShowToast(login.msg, 'success', () => {
				clearInterval(state.intervalTime);
				uni.removeStorageSync(Invitecode);
				setTimeout(() => {
					uni.navigateBack();
				}, 1000)
			});
		} else {
			handleShowToast(login.msg);
		}
	}
</script>
<style lang="scss" scoped>
	@import './login.scss';
</style>